import { createNamespacedHelpers } from "vuex";

const { mapState } = createNamespacedHelpers("editor");

import { cloneDeep } from "@/utils";

export default {
  data() {
    return {
      list: [],
      variable: {},
      graph: {},
      scaleW: 1,
      scaleH: 1,
    };
  },
  computed: {
    ...mapState(["getComponentList"]),
  },
  methods: {
    useProp(id) {
      const config = this.list.find((e) => e.id === id);
      if (!config) return {};
      return cloneDeep(config.prop);
    },
    useGlobal(id) {
      const config = this.list.find((e) => e.id === id);
      if (!config) return [];
      return cloneDeep(config.global);
    },
    getComputedStyle({ attr, zIndex }) {
      return {
        left: attr.x * this.scaleW + "px",
        top: attr.y * this.scaleH + "px",
        width: attr.w + "px",
        height: attr.h + "px",
        "z-index": zIndex,
      };
    },
  },
};
